<script lang="ts">
    import { useClassList } from "../utils/useClassList";
    import type { RadioProps } from "./Radio";

    let { checked = $bindable(), ...props }: RadioProps = $props();
    let type = props.type ?? "radio";

    const classList = $derived(
        useClassList(props, {
            "cm-checkbox": true,
            "cm-radio": type === "radio",
            "cm-checkbox-checked": checked,
            disabled: props.disabled,
            "cm-checkbox-with-extra": props.extra,
            "cm-checkbox-appearance-card": props.appearance === "card",
            "cm-checkbox-appearance-pureCard": props.appearance === "pureCard",
        })
    );

    const onClick = () => {
        if (props.disabled) {
            return;
        }
        if (checked) {
            return;
        }
        checked = true;
        props.onchange?.(checked, props.value);
    };
</script>

<!-- svelte-ignore a11y_click_events_have_key_events -->
<!-- svelte-ignore a11y_no_static_element_interactions -->
<div class={classList} onclick={onClick}>
    <span style="width: 0px; font-size: 12px; visibility: hidden">A</span>
    <input type="radio" name={props.name} value={props.value} style="display: none" />
    <span style="position: relative" class="cm-checkbox-outter">
        <span class="cm-checkbox-inner"></span>
    </span>
    <div class="cm-checkbox-content">
        {#if props.label}
            <span class="cm-checkbox-label">
                {#if typeof props.label === "function"}
                    {@render props.label()}
                {:else}
                    {props.label}
                {/if}
            </span>
        {/if}
        {#if props.extra}
            <div class="cm-checkbox-extra">
                {#if typeof props.extra === "function"}
                    {@render props.extra()}
                {:else}
                    {props.extra}
                {/if}
            </div>
        {/if}
    </div>
</div>
